<template>
    <div>
        <van-nav-bar title="系统消息" left-text="" right-text="清空" @click-left="$router.back(-1)" @click-right="deleteMessageBytype()">
            <span class="search-img" slot="left">
                <img src="../../assets/image/center/icon_return.png" alt="">
            </span>
        </van-nav-bar>
        <div class="give-like-img clearfix">
            <ul class="clearfix">
                <van-list v-model="loading" :finished="finished" @load="onLoad">
                    <li class="clearfix income-li" v-for="(val,index) in xtMessageArr" :key="index" v-if="isShowHnit==false">
                        <span class="color-3 font-28">
                            <em class="fl">{{val.title}}</em>                      
                            <em class="fr color-9 font-24">{{$time(val.createTime)}}</em>
                        </span>
                        <span class="color-9 font-24 text-align-j">
                            {{val.descript}}
                        </span>
                    </li>
                </van-list>
                <li class="hnit" v-if="isShowHnit==true">{{hnit}}</li>               
            </ul>
        </div>
    </div>
</template>
<script>
import apiHttp from '../../api/index'
import { Toast } from 'vant';
export default {
    data(){
        return{
            xtMessageArr:[],
            hnit:"暂无消息",
            isShowHnit:false,
            page:-1,
            size:10,
            loading: false,
            finished: false,
            totalElements:''
        }
    },
    created(){
        
    },
    methods:{
        onLoad(){
            this.page++
            this.getMessageByUserIdAndType()
            
        },
        //系统消息列表展示
        getMessageByUserIdAndType(){
            let that = this;
            let url='?page='+that.page+'&size='+that.size+'';
            apiHttp.messageIndex.getMessageByUserIdAndType(url,'',resp=>{
                if(resp.code==200){
                   if(resp.data.content.length==0){
                        this.isShowHnit = true;
                   }else {
                        for(let i in resp.data.content){
                            this.xtMessageArr.push(resp.data.content[i])
                        }
                        this.totalElements = resp.data.totalElements
                        this.loading = false
                        if(this.xtMessageArr.length >= this.totalElements){
                            this.finished = true
                        }
                   }
                }else {
                   Toast(resp.message);
                }
            })
            this.updateStatusByuserId();
        },       
        //系统消息清空（接口没问题不用测试，会删除数据库数据）
        deleteMessageBytype(){
            let that = this;
            apiHttp.messageIndex.deleteMessageBytype('',resp=>{
                if(resp.code==200){    
                    that.getMessageByUserIdAndType();
                }else{
                    Toast(resp.message);
                }
            })           
        },
        //改变消息状态为已读
        updateStatusByuserId(){
            let that = this;
            let status="1";
            let url=''+status+'';
            apiHttp.messageIndex.updateStatusByuserId(url,'',resp=>{
                if(resp.code==200){
                }else{
                    Toast(resp.message);
                }
            })


        }
    }
}
</script>
<style scoped>
.search-img{
    width: 1rem;
    height: 1rem;
    margin-left: 0.5rem;
}
.search-img>img{
    width: 1rem !important;
}
.van-hairline--bottom::after{
    border-bottom-width: 0;
}
.income-li{
    padding: .8rem;
    border-bottom: .04rem solid #f5f5f5;
}
.give-like-img span{
    min-height: 1rem;
    line-height: .8rem;
    display: block;
}
.hnit{
    text-align: center;
    color: #999999;
}
</style>


